<template>
	<view class="tabbar-page">
		<view class="tabbar-left">
			<view class="tabbar-item" :class="{ active: item.value === code }" v-for="(item, index) in tabs"
				:key="index" @click="setCurrentCode(item)">
				<view class="tabbar-item-text">{{ item.label }}</view>
			</view>
		</view>



		<view class="tabbar-right" :key="code">
			<view class="tabbar-content" :key="code" v-if="currentTabsData && currentTabsData.titles">
				<!-- <image class="goods-cover" src="/static/logo.png"></image> -->
				<image class="goods-cover" :src="'https://fh4.qinyuan.cn/' + currentTabsData.image_src"
					mode="widthFix"></image>
				<view class="goods" v-for="(item, index) in currentTabsData.titles" :key="index">
					<view class="goods-label" :style="{ color: dynamicColor }">
						<!-- {{ item.title_name }} -->
						<rich-text :nodes="getHtml(item.title_name)"></rich-text>
					</view>
					<view class="goods-list">
						<view class="goods-item" v-for="(product, subIndex) in item.products" :key="subIndex"
							@click="goToGoodsDetail(product.id)">
							<image v-if="product.error" class="goods-item-cover" src="/static/img-error.png"
								mode="widthFix" />
							<image v-else @error="onImageError(product)" class="goods-item-cover"
								:src="'https://fh4.qinyuan.cn/' + product.icon" mode="widthFix">
							</image>
							<view class="goods-item-label">
								{{ product.name }}
								<!-- <rich-text :nodes="getHtml(product.name)"></rich-text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="tabbar-content" v-else>
				<image class="goods-cover" mode="widthFix"
					src="https://fullhouse.qinyuan.cn//uploads/20230602/a181488c12f0175d62142bc64d2b4ba5.png"></image>
				<view class="goods" v-for="v in currentTabsData ">
					<view class="goods-label" :style="{ color: dynamicColor }">
						<rich-text :nodes="getHtml(v.title)"></rich-text>
					</view>
					<view @click="goTowebviewPage(v)">
						<image class="goods-cover" mode="widthFix" :src="v.imgurl"></image>
					</view> 
				</view>
			</view> -->
			<view class="tabbar-content" v-else>
				<image class="goods-cover" mode="widthFix"
					src="https://fh4.qinyuan.cn//uploads/20230602/a181488c12f0175d62142bc64d2b4ba5.png"></image>
				<view class="goods" v-for="v in currentTabsData">
					<view class="goods-label" :style="{ color: dynamicColor }">
						<rich-text :nodes="getHtml(v.title)"></rich-text>
					</view>
					<image class="goods-cover" mode="widthFix" :src="v.imgurl" @click="previewImage(v)"></image>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import request from '/common/request.js'
	import ErrorImg from '/static/img-error.png'
	export default {
		onShareAppMessage() {
			return {
				title: this.currentLabel, // Change the title to the current item.label value
				imageUrl: "",
				// path: ""
			}
		},
		data() {
			return {
				// tabs1: [
				// 	// { value: "厨下", label: "厨下" },
				// 	// { value: "净饮", label: "净饮" },
				// 	// { value: "全屋", label: "全屋" },
				// 	{ value: "空净", label: "空净" },
				// 	// { value: "套餐", label: "套餐" },
				// 	{ value: "户型", label: "户型" },
				// ],
				tabs: [{
						value: "厨下",
						label: "厨下"
					},
					{
						value: "净饮",
						label: "净饮"
					},
					{
						value: "全屋",
						label: "全屋"
					},
					{
						value: "户型",
						label: "户型"
					},

					{
						value: "套餐",
						label: "套餐"
					},
					{
						value: "空净",
						label: "空净"
					},
				],
				code: '',
				label: '',
				allTabsData: [],
				dynamicColor: '',
				currentTabsData: {},
			}
		},
		onLoad(options) {
			// this.getCategories()
			console.log(options)
			// const id = uni.getStorageSync('id');

			const {
				label,
				code
			} = options
			if (label && code) {
				this.currentLabel = label
				this.code = label

			}
			label && uni.setNavigationBarTitle({
				title: label
			})
			this.getProducts(null, () => {
				this.setCurrentCode({
					label: label,
					value: label
				})
			})
		},
		methods: {
			getDataHU() {
				return request({
					url: '/index/hstyle',
					method: 'get'
				})
			},
			getCategories() {
				request({
					url: '/index/xy_category',
					method: 'get'
				}).then(res => {
					// console.log(res)
					if (res && res.length) {
						this.getProducts(res[0].id)
					}
				})
			},
			onImageError(product) {
				this.$set(product, 'error', true)
			},
			getCurrentTabsData(value) {
				return this.allTabsData.find(e => e.name === value)
			},
			getProducts(id, fn) {
				request({
					// url: '/category/index',
					// 测试使用接口 /test/index
					url: '/test/index',
          method: 'get'
				}).then(res => {
					if (!res) return
					// if (res.data) {
					res = res.data
					// }
					this.tabs = res.map(e => {
						return {
							label: e.name,
							value: e.name
						}
					})
				
					let [ddd] = this.tabs.splice(3,1,{
						value: "户型",
						label: "户型"
					})
					this.tabs.push(ddd)
					// this.allTabsData = res
					this.allTabsData = res.map(e => {
						return {
							...e,
							titles: (e.titles || []).map(title => {
								return {
									...title,
									products: (title.products || []).map(prod => {
										return {
											...prod,
											icon: Array.isArray(prod.icon) ? prod.icon[0] :
												prod.icon
										}
									})
								}
							})
						}
					})
					// this.currentTabsData = this.getCurrentTabsData(this.tabs[0].value)
					const value = (this.tabs.find(e => e.value === this.currentLabel) || {}).value || this.tabs[0]
						.value
					this.currentTabsData = this.getCurrentTabsData(value)
					fn && fn()
				})
			},
			setCurrentCode(item) {
				this.code = item.value
				this.label = item.label
				uni.setNavigationBarTitle({
					title: item.label
				})

				if (item.label !== '户型') {
					this.currentTabsData = this.getCurrentTabsData(item.value)
				} else {
					this.getDataHU().then(res => {
						console.table(res)
						if (res && res.length) {
							this.currentTabsData = res
						}
					})

				}

				console.table(this.currentTabsData);
			},
			goTowebviewPage({
				target,
				title
			}) {
				uni.navigateTo({
					url: `/pages/webview/webview?url=${target}&title=${title}`
				})
			},
			previewImage(product) {
				// 使用可选链运算符来检查imgurl属性是否存在
				const imageUrl = product?.imgurl;

				// 如果imgurl存在，则执行放大查看的逻辑
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl],
						current: imageUrl,
					});
				} else {
					// 处理imgurl不存在的情况，例如给出一个提示或采取其他操作
					console.error('imgurl属性不存在');
				}
			},
			goToGoodsDetail(id) {
				uni.navigateTo({
					url: `/pages/goods-detail/goods-detail?id=${id}`
				})
			},
			getHtml(str) {
				if (!str) return ''
				let domain = 'https://fh4.qinyuan.cn';
				// let domain = 'http://zhs.75shop.xyz:8081';
				// /
				let newHtmlStr = str.replace(/src="\/uploads/g, `src="${domain}/uploads`);
				var newContent = newHtmlStr.replace(/<img[^>]*>/gi, (match) => {
					let processed = null;
					if (!match.match(/style=\"(.*)\"/gi)) {
						processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
					} else {
						processed = match.replace(/style=\"(.*)\"/gi,
							'style="width:100%;height:auto;display:block"');
					}
					return processed;
				});
				return newContent;
				// return newHtmlStr
			},
		}
	}
</script>

<style lang="scss">
	page {
		// min-height: 100vh;
		height: 100%;
	}

	.tabbar-page {
		display: flex;
		height: 100%;
	}

	.tabbar-left {
		// width: 200rpx;
		background-color: #f2f2f2;
		color: #ddd;
	}

	.tabbar-right {
		flex: 1;
		overflow: auto;
		background-color: #f2f2f2;
	}

	.tabbar-item {

		// padding: 30rpx 0;
		&.active {
			.tabbar-item-text {
				color: #04158c;
				// border-left: 3px solid #04158c;
				background-color: #fff;

				&::after {
					background-color: #04158c;
				}
			}
		}

		.tabbar-item-text {
			position: relative;
			padding: 30rpx 50rpx;
			color: #434343;
			box-sizing: border-box;
			// border-left: 3px solid transparent;
			transition: all .3s;

			&::after {
				position: absolute;
				left: 0;
				height: 50%;
				width: 3px;
				background-color: transparent;
				content: "";
				transition: all .3s;
			}
		}
	}

	.tabbar-content {
		.goods-cover {
			display: block;
			width: 100%;
			background-color: #fff;
		}

		.goods {
			background-color: #fff;
			margin-bottom: 20rpx;

			.goods-label {
				padding: 20rpx 20rpx;
				font-weight: bold;
				font-size: 17px;
				border-bottom: 1px solid #ddd;
				// color: skyblue;
				// color: #32a2c9;
				color: #009bde;
			}
		}
	}

	.goods-list {
		padding: 20rpx 10rpx;
		// display: flex;
		// flex-wrap: wrap;

		.goods-item {
			// display: inline-flex;
			display: inline-block;
			flex-direction: column;
			width: 50%;
			margin: 0 auto;
			max-width: 48%;
			margin-right: 1%;
			flex: 1;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			text-align: center;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.goods-item-cover {
				width: 80%;
				// height: auto;
				height: 0;
				margin: 0 auto;
			}

			.goods-item-label {
				padding-top: 20rpx;
				font-size: 12px;
				// color: #8f8f94;
				color: #000000;
				text-align: center;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 26px;
		font-weight: bold;
		color: #8f8f94;
		letter-spacing: 1px;
		padding-top: 100rpx;
		padding-bottom: 40rpx;
	}

	.sub-title {
		font-size: 22px;
		font-weight: bold;
		padding-bottom: 200rpx;
	}

	.buttons {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx;

		.button {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #547996;
			color: #fff;
			padding: 30rpx 40rpx;
			border-radius: 10px;

			.button-logo {
				width: 70rpx;
				height: 70rpx;
			}

			.button-text {
				font-size: 14px;
				padding-top: 10rpx;
			}
		}
	}

	.buttons-horizontal {
		.button {
			flex: 1;
			margin-right: 20rpx;
			padding: 12rpx 0;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.button-logo {
				width: 30rpx;
				height: 30rpx;
			}

			.button-text {
				padding: 0;
				padding-left: 20rpx;
				font-size: 13px;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>